<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>五四宪法历史资料陈列馆</title>
    <link rel="stylesheet" href="static/css/style.css">
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/common.js"></script>
</head>
<body>
<div class="main">
    <div class="top">
        <a class="back" href="javascript:history.back(-1)"><img src="static/image/left.png" alt="">返回</a>
        参观时间
    </div>
    <!--横向滚动文字-->
    <div id="scroll_div" class="fl">
        <div id="scroll_begin">
            <span class="pad_right">可预约后七天内参观，当日4点前可预约第二天参观，4点后需延后一天</span>
        </div>
        <div id="scroll_end"></div>
    </div>
    <div class="cg_time">
        <div class="s-title">参观日期：</div>
        <div class="choose_date">
            <select name="choose_date" id="">
                <option value="0">2019-04-04</option>
                <option value="1">2019-04-05</option>
                <option value="2">2019-04-06</option>
                <option value="3">2019-04-07</option>
                <option value="4">2019-04-08</option>
                <option value="5">2019-04-09</option>
                <option value="6">2019-04-10</option>
            </select>
            <img src="static/image/down.png" alt="">
        </div>
        <div class="choose_time">
            <div class="s-title">可参观时间段：</div>
            <p>9:00——10:00</p>
            <p>9:00——10:00 <span>*该时间段无讲解服务</span></p>
            <p>9:00——10:00 <span>*该时间段无讲解服务</span></p>
            <p>9:00——10:00</p>
            <p>9:00——10:00</p>
            <p>9:00——10:00</p>
            <p>9:00——10:00</p>
        </div>
    <a href="javascript:;" class="submit">完成</a>
</div>
<script>
$(function(){
    $('.choose_time>p').on("click",function(){
        $(this).addClass('select').siblings().removeClass('select');
    })
})
//文字横向滚动
function ScrollImgLeft(){
    var speed=50;
    var MyMar = null;
    var scroll_begin = document.getElementById("scroll_begin");
    var scroll_end = document.getElementById("scroll_end");
    var scroll_div = document.getElementById("scroll_div");
    scroll_end.innerHTML=scroll_begin.innerHTML;
    function Marquee(){
        if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
            scroll_div.scrollLeft-=scroll_begin.offsetWidth;
        else
            scroll_div.scrollLeft++;
    }
    MyMar=setInterval(Marquee,speed);//给上面的方法设置时间  setInterval
    //鼠标点击这条公告栏的时候,清除上面的方法,让公告栏暂停
    scroll_div.onmouseover = function(){
        clearInterval(MyMar);
    }
    //鼠标点击其他地方的时候,公告栏继续运动
    scroll_div.onmouseout = function(){
        MyMar = setInterval(Marquee,speed);
    }
}
ScrollImgLeft();
</script>
</body>
</html>
